Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

Working with Module Bundlers

Almost all of today's JavaScript frameworks work with some sort of module bundler to combine the files in your project into a single file that can be loaded by the browser. The most popular of these is webpack which is the default choice on significant projects like Angular, React, and Vue.js although alternatives do exist. Some can be extended to do more tasks but at a minimum they are usually responsible for loading your license and exposing it to the rest of your files so it can be used. Module bundlers make heavy use of the newer import and export syntax; many simple mistakes coming from working with bundlers stem from something not being imported or exported correctly. If you are not very familiar with the new syntaxes and the different browsers that implement them, be sure to read about them before jumping into working with a module bundler.

Example webpack configuration

Your library includes an example of using webpack to bundle the library to create an advanced chart. The chartiq folder contains two directories: webpack-example (webpack 5) and webpack4-example (webpack 4). Each directory contains the following files:

  • webpack.config.js configuration file
  • package.json file
  • index.html bundle template file
  • src/sample-template-webpack.js entry point module
  • webpack-example/src/chart-context-markup.html contains markup that webpack copies into the cq-context element to create the default technical analysis chart

These files enable you to create a bundle from the ChartIQ library.

You will need Node.js installed. To create the bundle, run the following commands from the chartiq/webpack-example folder:

  • npm ci
  • npm run build

The bundle is created in the chartiq/dist folder. Load chartiq/dist/index.html in your web browser. The generated file is equivalent to ChartIQ's advanced chart template.

Note: You may need to change the paths referenced in webpack.config.js to adapt the example for your application.

Bundlers and script tags

Since version 8.0.0, ChartIQ has been distributed as an ES Module. This means that library API objects such as CIQ will no longer be available as global, as they were in versions prior to 8.0.0. If your environment still requires access to the CIQ object or other objects that were global in past versions, use the above webpack configuration example and:

  • remove the following code in the sample-template-webpack.js that creates chart in an ES6 environment

    const config = getDefaultConfig({
	markerFeed: marker.MarkersSample,
//...
});

// Load the chart
let stxx = config.createChart();

  • instead, use resources provided in the ciqAvailable callback function in the index.html file to proceed with chart creation or assigning library resources to the global namespace in an ES5 environment:

    function ciqAvailable({ CIQ }) {
		// Code to run when developing in ES5 and "import" is not available in toolchain
		Object.assign(window, libraryResources);
		var CIQ = libraryResources.CIQ;
		var quoteFeedSimulator = libraryResources.quoteFeedSimulator;
		// ...
	}

Note: If you are building for production with tree shaking (enabled by default in webpack.config.js), then you can reduce bundle size by commenting out or deleting features that your application is not using in importActivation.js and importActivationAdvanced.js:

if (typeof __TREE_SHAKE__ !== "undefined" && __TREE_SHAKE__) {
	/* comment out any feature you do not want in your bundle */
	CIQ.activateImports(
		Standard.createEngine,
		// ...
		// AddOns.fullScreen,
		AddOns.inactivityTimer,
		AddOns.rangeSlider,
		AddOns.shortcuts,
		AddOns.tableView,
		AddOns.tooltip,
		// Components.abstractMarker,
		// Components.advertisement,
		// ...

Loading other file types

The example provided seeks to bundle as many resources as possible, including HTML and CSS/SCSS. For this task, it employs a few commonly used plugins to accomplish that goal. It also uses some loaders to help webpack understand how to load those files. Make sure that you have installed all of the dependencies in package.json file (for details, refer to the modules section of the sample webpack.config.js. Note: These loaders are required if you are planning to use plugins with a module bundler.

The example also illustrates how to use bundle-splitting to achieve more manageable script file sizes than bundling all of the library into one, big js file. One way to split the files is illustrated in the optimizations section of webpack.config.js.

Next steps